<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<style>
			/* 相对定位     box2图片压到box1图片上 */
			div.box1{
				width: 250px;
				height: 250px;
				background:url(img/12.png);
				/* 声明一个相对定位与方向属性 */
				position:relative;
				left: 0;
				top: 0;
				/* 堆叠：  z-index: ;      针对所有的position  定位 */
                      z-index: 58;				
			}
			div.box2{
				width: 0;
				height: 0;
				background: url(img/13.png);
				/* 声明一个相对定位与方向属性 */
				position: relative;
				left: 0;
				top: 0;
				z-index: 25;
				
			}
			
		</style>
	</head>
	<body>
		<!-- 定位：相对定位      相对于父元素定位
		              功能:单一元素定位     元素在正常文档流中      推荐
					  position属性：relative；声明元素可以用来相对定位意义
					                  方向属性：left 、right、top、 bottom
									  堆叠顺序属性：  z-index
									                       属性值数值：数值越大，越靠前
					                      绝对定位：按照定位祖先【页面左上角】进行定位
										  功能：脱离文档流，不占据原空间
										  方向属性和叠加属性和相对以及固定定位共用
										  position属性：absolute：    声明文员可以使用绝对定位
										  
										  实际开发中：相对定位结合绝对定位一起使用
										                       侧边栏、左栏、遮罩层【挂靠】
															 案例：  左栏：弹出【html结构，语义化标签+css两种定位+js】-->
	           <div class="box1"></div>
	          <div class="box2"></div>
	</body>
</html>